<template>
	<el-sub-menu v-if="hasChildren" :index="itemConfig.path">
		<template #title>
			<el-icon>
				<component :is="itemConfig.meta.icon"></component>
			</el-icon>
			<span>{{ itemConfig.meta.title }}</span>
		</template>
		<SubMenu v-for="item in itemConfig.children" :key="item.path" :itemConfig="item"></SubMenu>
	</el-sub-menu>
	<el-menu-item v-else :index="itemConfig.path">
		<el-icon>
			<component :is="itemConfig.meta.icon"></component>
		</el-icon>
		<template #title>
			<span>{{ itemConfig.meta.title }}</span>
		</template>
	</el-menu-item>
</template>

<script setup lang="ts">
import { ElMenuItem, ElSubMenu, ElIcon } from "element-plus";
import { computed } from "vue";
const props = defineProps({
	itemConfig: {
		type: Object,
		default: () => ({}),
	},
});
const hasChildren = computed(() => {
	return props.itemConfig.children && props.itemConfig.children.length;
});
</script>

<style lang="scss" scoped></style>
